<template>
  <div class="container">
    <div v-show="!showDetails">
      <!-- 教学任务搜索 -->
      <div>
        <table>
          <tr>
            <th>
              <span>学期：</span>
              <el-button
                @click="openSemesterList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="semesterSelect">{{semesterSelect.name}}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>课程：</span>
              <el-button
                @click="openCourseList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="courseSelect">{{courseSelect.name}}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th></th>
          </tr>
          <tr>
            <th>
              <span>班级：</span>
              <el-button
                @click="openInstructionClassList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="instructionClassSelect">{{instructionClassSelect.name}}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <span>教师：</span>
              <el-button
                @click="openTeacherList = true"
                type="text"
                style="width: 150px; text-align: left;"
              >
                <span v-if="teacherSelect">{{teacherSelect.name}}</span>
                <span v-else>未选择</span>
              </el-button>
            </th>
            <th>
              <el-button type="primary" icon="el-icon-search" @click="searchTeachingTask">搜索</el-button>
              <el-button type="primary" v-if="showButton">生成教学任务书（Excel导出）</el-button>
            </th>
          </tr>
        </table>
        <!-- 学期筛选 -->
        <el-dialog title="选择学期" :visible.sync="openSemesterList">
          <el-input placeholder="请输入关键字" v-model="semesterKeyword">
            <template slot="prepend">学期名</template>
            <el-button slot="append" icon="el-icon-search" @click="getSemesterByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="semesterSelect">
            <el-radio
              v-for="(semester, index) in semesterList"
              :key="'semester'+index"
              :label="semester"
            >{{semester.name}}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="semesterSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openSemesterList = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 课程筛选 -->
        <el-dialog title="选择课程" :visible.sync="openCourseList">
          <el-input placeholder="请输入关键字" v-model="courseKeyword">
            <template slot="prepend">课程名</template>
            <el-button slot="append" icon="el-icon-search" @click="getCourseByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="courseSelect">
            <el-radio
              v-for="(course, index) in courseList"
              :key="'course'+index"
              :label="course"
            >{{course.name}}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="courseSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openCourseList = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 班级筛选 -->
        <el-dialog title="选择班级" :visible.sync="openInstructionClassList">
          <el-input placeholder="请输入关键字" v-model="instructionClassKeyword">
            <template slot="prepend">班级名</template>
            <el-button slot="append" icon="el-icon-search" @click="getInstructionClassByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="instructionClassSelect">
            <el-radio
              v-for="(instructionClass, index) in instructionClassList"
              :key="'instructionClass'+index"
              :label="instructionClass"
            >{{instructionClass.name}}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="instructionClassSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openInstructionClassList = false">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 教师筛选 -->
        <el-dialog title="选择教师" :visible.sync="openTeacherList">
          <el-input placeholder="请输入关键字" v-model="teacherKeyword">
            <template slot="prepend">教师名</template>
            <el-button slot="append" icon="el-icon-search" @click="getTeacherByKeyword"></el-button>
          </el-input>
          <br />
          <br />
          <el-radio-group v-model="teacherSelect">
            <el-radio
              v-for="(teacher, index) in teacherList"
              :key="'teacher'+index"
              :label="teacher"
            >{{teacher.name}}</el-radio>
          </el-radio-group>
          <div slot="footer" class="dialog-footer">
            <el-button @click="teacherSelect = ''">清 空</el-button>
            <el-button type="primary" @click="openTeacherList = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <hr />
      <!-- 教学任务列表 -->
      <el-table
        :data="teachingAssignmentList.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        stripe
        border
        @row-click="rowClick"
      >
        <el-table-column prop="semesterName" label="学期" />
        <el-table-column prop="instructionClassName" label="班级" />
        <el-table-column prop="courseName" label="课程" />
        <el-table-column prop="teacherName" label="教师" />
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        style="margin-left: 30%;"
      ></el-pagination>
      <el-switch v-model="showButton" active-text="admin" inactive-text="editor"></el-switch>
    </div>
    <!-- 详情 -->
    <div v-show="showDetails">
      <teachingTaskDetails :taskDetails="taskDetails" @closeDetails="closeDetails" />
    </div>
  </div>
</template>

<script>
import { getAllSemester } from "@/api/semester";
import { getAllTeacher } from "@/api/teacher";
import { getAllCourse } from "@/api/course";
import { getAllInstructionClass } from "@/api/instructionClass";
import teachingTaskDetails from "@/views/education-instructionalMatters/teaching-tasks/details";
export default {
  name: "TeachingAssignment",
  data() {
    return {
      tableTotal: 6,
      currentPage: 1,
      pagesize: 10,
      showButton: true,
      showDetails: false, //显示某一行的教学任务详情
      taskDetails: {}, //某一行的教学任务详情
      teachingAssignmentList: [], //教学任务表

      teacherList: [], //教师列表
      teacherSelect: "", //选择的教师
      openTeacherList: false, //教师筛选框是否开启
      teacherKeyword: "", //教师筛选关键字

      instructionClassList: [], //班级列表
      instructionClassSelect: "", //选择的班级
      openInstructionClassList: false, //班级筛选框是否开启
      instructionClassKeyword: "", //班级筛选关键字

      courseList: [], //课程列表
      courseSelect: "", //选择的课程
      openCourseList: false, //课程筛选框是否开启
      courseKeyword: "", //课程筛选关键字

      semesterList: [], //学期列表
      semesterSelect: "", //选择的学期
      openSemesterList: false, //学期筛选框是否开启
      semesterKeyword: "" //学期筛选关键字
    };
  },
  components: {
    teachingTaskDetails
  },
  created() {
    //页面加载时，获取教学任务表
    this.gain_teachingAssignment_list();
    //获取学期列表
    this.getAllSemester();
    //获取教师列表
    this.getAllTeacher();
    //获取课程列表
    this.getAllCourse();
    //获取班级列表
    this.getAllInstructionClass();
  },
  methods: {
    //获取教学任务表
    gain_teachingAssignment_list() {
      this.teachingAssignmentList = [
        {
          id: "11484156888",
          semesterId: "2018201901",
          semesterName: "2018-2019第一学期",
          instructionClassId: "02",
          instructionClassName: "软件一班",
          courseId: "01",
          courseName: "C语言",
          teacherName: "张三",
          teacherId: "01"
        },
        {
          id: "11484156878",
          semesterId: "2018201901",
          semesterName: "2018-2019第一学期",
          instructionClassId: "02",
          instructionClassName: "软件一班",
          courseId: "02",
          courseName: "高等数学",
          teacherName: "李四",
          teacherId: "02"
        },
        {
          id: "11484156858",
          semesterId: "2018201901",
          semesterName: "2018-2019第一学期",
          instructionClassId: "02",
          instructionClassName: "软件一班",
          courseId: "03",
          courseName: "英语",
          teacherName: "王五",
          teacherId: "03"
        },
        {
          id: "11484156848",
          teacherId: "145168435",
          teacherName: "志健",
          semesterId: "18451684",
          semesterName: "2020-2021第一学期",
          instructionClassId: "18451623684",
          instructionClassName: "17软件1班",
          courseId: "15481",
          courseName: "C语言程序设计"
        },
        {
          id: "11484156898",
          semesterId: "2018201901",
          semesterName: "2018-2019第一学期",
          instructionClassId: "02",
          instructionClassName: "软件一班",
          courseId: "04",
          courseName: "数据结构",
          teacherName: "刘明",
          teacherId: "05"
        },
        {
          id: "11484156868",
          semesterId: "2018201901",
          semesterName: "2018-2019第一学期",
          instructionClassId: "02",
          instructionClassName: "软件一班",
          courseId: "08",
          courseName: "数据库",
          teacherName: "李架",
          teacherId: "06"
        }
      ];
    },

    // 获取学期列表
    getAllSemester() {
      getAllSemester().then(res => {
        this.tableTotal = res.data.semesterList.length;
        this.semesterList = res.data.semesterList;
      });
    },

    //获取教师列表
    getAllTeacher() {
      getAllTeacher().then(res => {
        this.teacherList = res.data.teacherList;
      });
    },

    //获取课程列表
    getAllCourse() {
      getAllCourse().then(res => {
        this.courseList = res.data.courseList;
      });
    },

    //获取授课班级列表
    getAllInstructionClass() {
      getAllInstructionClass().then(res => {
        this.instructionClassList = res.data.instructionClassList;
      });
    },

    //对话框内部根据关键词搜索学期
    getSemesterByKeyword() {},

    //对话框内部根据关键词搜索课程
    getCourseByKeyword() {},

    //对话框内部根据关键词搜索班级
    getInstructionClassByKeyword() {},

    //对话框内部根据关键词搜索教师
    getTeacherByKeyword() {},

    //条件搜索教学任务
    searchTeachingTask() {
      const postData = {
        teacherId: this.teacherSelect.id,
        instructionClassId: this.instructionClassSelect.id,
        courseId: this.courseSelect.id,
        semesterId: this.semesterSelect.id
      };
    },

    //选中行，显示详情
    rowClick(val) {
      this.taskDetails = val;
      this.showDetails = true;
    },

    //详情组件传过来的数据
    closeDetails(val) {
      this.showDetails = val;
    },

    // 换页
    handleSizeChange: function(size) {
      this.pagesize = size;
    },
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage;
    }
  }
};
</script>

<style scoped>
.container {
  width: 80%;
  max-width: 100%;
  margin: 20px auto;
}
span {
  font-weight: 500;
}
tr {
  height: 40px;
}
</style>
